<template>
  <div>
    <h3>ScriptSetup</h3>
    <p>name {{ name }}</p>
    <p>role {{ role }}</p>

    <p>{{ myName }}</p>
    <button @click="sayHello">Hello</button>
  </div>
</template>

<!-- 相当于script中的所有代码都是写在setup中的（默认全Vue3） -->
<script setup>
// ref响值 reactive响对 toRefs响对的响值化（模板就幸福了）
import { ref, reactive, toRefs } from "vue";

// step1：定义响对
const { name, role } = toRefs(
  reactive({
    name: "雷蒙多：又累又萌的小多多",
    role: "菊花Mate60宣传大使",
  })
);

// 代码最外层的任何东东（组件+变量+函数+响对+响值...）直接对模板暴露
const myName = "法外狂徒张三三";
const sayHello = () => console.log("HelloWorld: 师姐你好！");
</script>

<style lang="scss" scoped></style>
